<extend name="Public/admin"/>
<block name="extra-js">
<script>
$(document).ready(function(){
	$("input[name=themeOption][value={$place_theme}]").attr("checked",true);

	$("#modal-carousel").carousel({interval:false});
	$("#modal-carousel").on("slid.bs.carousel", function () {
        $(".modal-title")
        .html($(this)
        .find(".active img")
        .attr("title"));
   });

   $(".row .thumbnail").click(function(){
		var content = $(".carousel-inner");
		var title = $(".modal-title");

		content.empty();  
		title.empty();

		var id = this.id;  
		var repo = $("#img-repo .item");
		var repoCopy = repo.filter("#" + id).clone();
		var active = repoCopy.first();

		active.addClass("active");
		title.html(active.find("img").attr("title"));
		content.append(repoCopy);

  	$("#modal-gallery").modal("show");
  });
});
</script>
</block>
<block name='main-content'>
<div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">主题编辑</h1>
        </div>
  </div>
    <div class="row">
    <form action="__URL__/chooseTheme" method="post">
		<div class="row">
			<div class="col-12 col-md-4 col-sm-6">
				<a title="Image 1" href="#"> 
				<img class="thumbnail img-responsive" id="image-1" src="http://7sbqim.com1.z0.glb.clouddn.com/zhjdcool.jpg" style="height:480px;width:320px;">
				</a>
				<div class="radio">
			  <center><label>
			    <input type="radio" name="themeOption" id="optionsRadios1" value="cool" >清爽
			  </label></center>
			</div>
			</div>

			<div class="col-12 col-md-4 col-sm-6">
				<a title="Image 2" href="#"> 
					<img class="thumbnail img-responsive" id="image-2" src="http://7sbqim.com1.z0.glb.clouddn.com/zhjdmetro.jpg" style="height:480px;width:320px;">
				</a>
				<center><label>
			    <input type="radio" name="themeOption" id="optionsRadios2" value="metro" >metro
			  </label></center>
			</div>

			<div class="col-12 col-md-4 col-sm-6">
				<a title="Image 2" href="#"> 
					<img class="thumbnail img-responsive" id="image-3" src="http://7sbqim.com1.z0.glb.clouddn.com/zhjdflat.jpg" style="height:480px;width:320px;">
				</a>
				<center><label>
			    <input type="radio" name="themeOption" id="optionsRadios2" value="flat" >扁平
			  </label></center>
			</div>
	    </div>

	    <div class="row">
			<div class="col-12 col-md-4 col-sm-6">
				<a title="Image 2" href="#"> 
					<img class="thumbnail img-responsive" id="image-4" src="http://7sbqim.com1.z0.glb.clouddn.com/zhjdwhite.jpg" style="height:480px;width:320px;">
				</a>
				<center><label>
			    <input type="radio" name="themeOption" id="optionsRadios2" value="white" >洁净
			  </label></center>
			</div>

			<div class="col-12 col-md-4 col-sm-6">
				<a title="Image 2" href="#"> 
					<img class="thumbnail img-responsive" id="image-5" src="http://7sbqim.com1.z0.glb.clouddn.com/zhjdblue.jpg" style="height:480px;width:320px;">
				</a>
				<center><label>
			    <input type="radio" name="themeOption" id="optionsRadios2" value="blue" >蓝色
			  </label></center>
			</div>
	    </div>

		<div>
			<button class="col-md-2 btn btn-primary" type="submit" style="float:right;">确定</button>
		</div>
	</form>
	</div>
    
	<div class="hidden" id="img-repo">
		<div class="item" id="image-1">
			<img class="thumbnail img-responsive" title="预览1" src="http://7sbqim.com1.z0.glb.clouddn.com/zhjdcool.jpg">
		</div>

		<div class="item" id="image-2">
			<img class="thumbnail img-responsive" title="预览1" src="http://7sbqim.com1.z0.glb.clouddn.com/zhjdmetro.jpg">
		</div>

		<div class="item" id="image-3">
			<img class="thumbnail img-responsive" title="预览1" src="http://7sbqim.com1.z0.glb.clouddn.com/zhjdflat.jpg">
		</div>

		<div class="item" id="image-4">
			<img class="thumbnail img-responsive" title="预览1" src="http://7sbqim.com1.z0.glb.clouddn.com/zhjdwhite.jpg">
		</div>
		
		<div class="item" id="image-5">
			<img class="thumbnail img-responsive" title="预览1" src="http://7sbqim.com1.z0.glb.clouddn.com/zhjdblue.jpg">
		</div>
	</div>

    <include file="Public/themeGallerymodal" />
</block>